<template>
  <div class="sendDialog">
    <el-dialog
      v-dialogDrag
      title="赠送商品"
      :visible.sync="sendDialogVisible"
      @open="handleOpen"
      :before-close="handleBeforeClose"
      @close="handleClose"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="sendForm"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-form-item label="背景名称">
          <el-input v-model="sendForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="展示图片">
          <img v-if="sendForm.picture" :src="sendForm.picture" class="avatar" />
        </el-form-item>
        <el-form-item label="用户ID" prop="user_code">
          <el-input
            v-model.number="form.user_code"
            placeholder="请输入用户ID"
          ></el-input>
        </el-form-item>
        <el-form-item label="赠送天数" prop="use_days">
          <el-radio v-model="form.use_days" :label="7"></el-radio>
          <el-radio v-model="form.use_days" :label="15"></el-radio>
          <el-radio v-model="form.use_days" :label="30"></el-radio>
        </el-form-item>
        <el-form-item label="自定义天数" prop="use_days">
          <el-input v-model="form.use_days"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="handleCloseSendDialog">
          取消
        </el-button>
        <el-button type="primary" @click="handleConfirmSend">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SendDialog",
  props: {
    sendDialogVisible: {
      type: Boolean,
      default: false
    },
    is_suit: {
      type: Boolean,
      default: false
    },
    sendForm: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      form: {
        id: undefined,
        user_code: undefined,
        use_days: 7
      },
      rules: {
        user_code: [
          { required: true, message: "请输入用户编号", trigger: "blur" }
        ],
        use_days: [{ required: true, message: "请选择天数或自定义天数" }]
      },
      bubbleStyle: [
        { value: 1, label: "样式一" },
        { value: 2, label: "样式二" },
        { value: 3, label: "样式三" },
        { value: 4, label: "样式四" },
        { value: 5, label: "样式五" },
        { value: 6, label: "样式六" },
        { value: 7, label: "样式七" },
        { value: 8, label: "样式八" }
      ]
    };
  },
  methods: {
    // 组件打开时 将当前行id进行赋值
    handleOpen() {
      this.form.id = this.sendForm.id;
    },
    handleConfirmSend() {
      this.$refs.sendForm.validate(valid => {
        if (valid) {
          this.$emit("sendForm", this.form);
        } else {

          return false;
        }
      });
    },
    handleCloseSendDialog() {
      this.$emit("update:sendDialogVisible", false);
    },
    handleBeforeClose() {
      this.$emit("update:sendDialogVisible", false);
    },
    handleClose() {
      this.$refs.sendForm.resetFields();
      this.form = {
        id: undefined,
        user_code: undefined,
        use_days: 7
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
